<template>
	<view class="content">
		<view class="swiper-box">
			<swiper 
				class="swiper"
				:indicator-dots="false"
				:autoplay="true"
				:circular="true"
				:interval="3000"
				:current="currentIndex"
				@change="changeSwiper"
			>
				<swiper-item v-for="(item, index) in swipers" :key="item.id">
					<image :src="item.image" class="swiper-img" />
					<view class="text">
						<view class="swiper-title">{{item.title}}</view>
						<view>{{item.description}}</view>
					</view>
				</swiper-item>
			</swiper>

			<view class="custom-dots">
				<view 
					v-for="(item, index) in swipers" 
					:key="index"
					class="dot"
					:class="{ active: currentIndex === index }"
					@click="goToSlide(index)"
				/>
			</view>
		</view>
		<view class="goods-list">
			<view class="goods-title">
				<view @click="showAll">热门商品</view>
			</view>
			<view class="goods-wrap">
				<view class="goodsCard" v-for="value in goodsList" :key="value.id">
					<image :src="value.goods_icon" @click="detail(value.id)" />
					<view>
						<view class="goodInfo">{{value.goods_desc}}</view>
						<view class="price">价格：￥{{value.goods_price}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'

	let swipers = ref([
		{
			id: 1,
			title: '新品上市',
			description: 'iPhone 15 Pro 现已发售',
			image: '/static/swiper/swiper1.jpg',
		},
		{
			id: 2,
			title: '限时优惠',
			description: 'MacBook Air 立减1000元',
			image: '/static/swiper/swiper2.jpg',
		},
		{
			id: 3,
			title: '热销推荐',
			description: 'AirPods Pro 音质升级',
			image: '/static/swiper/swiper3.jpg',
		}
	])

	const currentIndex = ref(0)

	function changeSwiper(e) {
		currentIndex.value = e.detail.current
	}

	function goToSlide(i) {
		currentIndex.value = i
	}


	import { getGoodsPage } from '../../api/api'

	const Photos = ref([])
	const Computers = ref([])
	const goodsList = ref([])

	function getPhotos() {
		return getGoodsPage({
			goods_category: 1,
			currentPage: 1,
			pageSize: 2
		}).then(res => {
			Photos.value = res.data;
		});
	}

	function getComputers() {
		return getGoodsPage({
			goods_category: 0,
			currentPage: 1,
			pageSize: 2
		}).then(res => {
			Computers.value = res.data;
		});
	}

	Promise.all([getPhotos(), getComputers()]).then(() => {
		goodsList.value = [...Photos.value,...Computers.value]
	});

	function detail(id) {
		uni.setStorageSync('goods_id', id)
		uni.navigateTo({
			url: `/pages/details/details?id=${id}`
		});
	}
</script>

<style lang="scss">
	.content{
		.swiper-box{
			width: 100%;
			height: 350rpx;
			position: relative;
			.swiper{
				width: 100%;
				height: 100%;
			}
			.swiper-img{
				height: 350rpx;
				width: 100%;
			}
			.text{
				position: absolute;
				top: 60%;
				margin-left: 20rpx;
				color: #f5f5f5;
				.swiper-title{
					font-weight: 600;
				}
			}
			.custom-dots{
				position: absolute;
				bottom: 20rpx;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				gap: 12rpx;
			}
			.dot {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background: rgba(255,255,255,0.5);
			}

			.dot.active {
				background: white;
				transform: scale(1.2);
			}
		}

		.button-list {
			display: flex;
			justify-content: space-between;
			button {
				margin-right: 5rpx;
				width: 100px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border-radius: 5px;
				background-color: #fff;
				color: #333;
				font-size: 14px;
				cursor: pointer;
			}
			.showBtn {
				background-color: #70ece2;
			}
		}
		.goods-list {
			margin: 20rpx;
			.goods-title {
				font-size: 20px;
				font-weight: 600;
				margin: 10rpx auto;
				text-align: center;
			}
			.goods-wrap {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				.goodsCard {
					border-radius: 5px;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
					overflow: hidden;
					width: 45%;
					margin: 15rpx 10rpx;
					image {
						width: 90%;
						height: 250rpx;
						border-top-left-radius: 5px;
					}
					.goodInfo {
						font-size: 14px;
						color: #333;
						margin: 5rpx 16rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.price {
						font-size: 14px;
						color: #ff5777;
						margin: 5rpx 16rpx;
					}
				}
			}
		}
	}
</style>
